<template>
  <view>
    <!-- 顶部用户信息 -->
    <view class="topUserInfo">
      <view class="bgImg">
        <image src="/static/community/bg@2x.png" mode="aspectFit"></image>
      </view>
      <view class="">
        <view class="leftBackIcon" @click="goBack">
          <image
            src="/static/community/fanhui btn@2x.png"
            mode="aspectFit"
          ></image>
        </view>
        <!--<view class="setImg">-->
        <!--  <image src="/static/my/setIcon@3x.png" mode="aspectFit"></image>-->
        <!--</view>-->
      </view>

      <view class="userBox">
        <view class="leftBox">
          <view class="headImg">
            <image
              style="border-radius: 50%"
              :src="productGroups.moduleImgUrl"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="infoBox">
          <view class="nameBox">{{ productGroups.moduleBlurb }}</view>
          <view class="IPBox"> {{ productGroups.moduleBlurb }} </view>
        </view>
      </view>
      <!--<view class="signBox" @click="editUserSign">-->
      <!--  <image src="/static/community/qianming@2x.png" mode="aspectFit"></image>-->
      <!--</view>-->
    </view>
    <!-- 切换tabs -->
    <view class="switchTabs">
      <view
        v-for="(item, index) in tabsList"
        :key="index"
        :class="['tabsBox', { actTabsBox: activeTabs === item.value }]"
        @click="switchTabs(item.value)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="">
      <!-- 全部 -->
      <view class="" style="margin: 0 28rpx">
        <view class="consultBox" v-if="activeTabs !== 5">
          <view
            class="consultItem"
            v-for="(item, index) in noteList"
            :key="index"
            @click="goDetail(item)"
          >
            <view class="leftText">
              <view class="title"> {{ item.noteTitle }} </view>
              <view class="text">
                <text
                  >{{ formatDate(item.createTime) }}·{{ item.authorName }}</text
                >
                <text>{{ item.upCount }}个回复</text>
              </view>
            </view>
            <view class="rightImg">
              <image :src="item.firstPicture" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <!-- 添加加载更多组件 -->
        <uni-load-more
          ref="loadmorecom1"
          :status="loadMoreStatus"
          @loadmore="getNotes"
        ></uni-load-more>
      </view>
      <view class="" style="margin: 0 28rpx">
        <subSection
          v-if="activeTabs == 5"
          :subSectionList="subSectionList"
        ></subSection>
      </view>
    </view>
    <view class="addIcon" @click="release()">
      <image
        src="/static/community/home_post btn@2x.png"
        mode="widthFix"
      ></image>
    </view>
  </view>
</template>

<script>
import shopList from "../community/shopList/shopList.vue";
import subSection from "../community/shopList/subSection.vue";
import commonMixin from "@/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  components: {
    shopList,
    subSection,
  },
  data() {
    return {
      moduleId: null,
      categoryId: null,
      activeTabs: 1,
      tabsList: [
        {
          name: "全部",
          value: 1,
        },
        {
          name: "置顶",
          value: 2,
        },
        {
          name: "热帖",
          value: 3,
        },
        {
          name: "精华",
          value: 4,
        },
        {
          name: "子版块",
          value: 5,
        },
      ],
      noteList: [],
      productGroups: {},
      page: 1,
      apiLoadingStatus1: false,
      loadMoreStatus: "more", // 加载更多状态：more-加载前，loading-加载中，noMore-没有更多了
      loadMoreTimer1: null,
      notePostCategory: "",
      subSectionList: [], // 子版块数据
      accessToken: "",
      userId: "",
    };
  },
  onLoad(options) {
    console.log(options);
    this.accessToken = options.accessToken;
    this.userId = options.userId;
    this.moduleId = options.moduleId;
    this.categoryId = options.categoryId;
    this.getData();
    this.getNotes();
  },
  // 添加下拉刷新
  onPullDownRefresh() {
    this.getNotes(true);
  },
  // 添加触底加载更多
  onReachBottom() {
    if (this.loadMoreStatus === "more" && !this.apiLoadingStatus1) {
      this.getNotes();
    }
  },
  methods: {
    getData() {
      uni.app.post(
        "/forum/note/getModule",
        {
          id: this.moduleId,
          categoryId: this.categoryId,
          authorId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          this.productGroups = res.data[0];
        },
      );
    },
    getNotes(isReload = false) {
      // console.log('我开始请求了')
      if (isReload) {
        this.page = 1;
        this.noteList = [];
        this.loadMoreStatus = "more";
      }

      this.apiLoadingStatus1 = true;
      this.loadMoreStatus = "loading";
      const that = this;
      let params = {
        authorId: uni.getStorageSync("userId"),
        ipRealAddress: "",
        keyword: this.searchStr || "",
        limit: 10,
        myStarById: "",
        myUpById: "",
        noteCategory: this.moduleId,
        noteId: "",
        noteTitle: "",
        offset: this.page,
        notePostCategory: this.notePostCategory,
      };
      uni.app.post("/forum/note/getNotes", params, "", "", (res) => {
        if (res.code == 2000) {
          if (that.page <= res.data.pages) {
            that.noteList = [...that.noteList, ...res.data.records];
            console.log(that.noteList);

            // 当notePostCategory为4时，将结果设置给subSectionList
            if (that.notePostCategory == 4) {
              const subData = res.data.records.map((item) => {
                return {
                  imgUrl:
                    item.firstPicture || "/static/community/pic@2x (1).png",
                  title: item.noteTitle || "标题文字",
                  text: `${item.upCount || 0}人 正在讨论`,
                  id: item.noteId,
                };
              });
              that.subSectionList = subData;
            }

            if (that.page == res.data.pages) {
              that.loadMoreStatus = "noMore";
            } else {
              that.page = that.page + 1;
              that.loadMoreStatus = "more";
            }
            that.apiLoadingStatus1 = false;
          } else if (res.data.pages == 0) {
            that.apiLoadingStatus1 = false;
            that.loadMoreStatus = "noMore";
          }
          if (isReload) {
            uni.stopPullDownRefresh();
          }
        }
      });
    },
    setUserInfo() {
      console.log("设置用户信息");
    },
    editDeadImg() {
      console.log("切换头像");
    },
    editUserSign() {
      console.log("编辑用户签名");
    },
    switchTabs(value) {
      // 切换按钮
      this.activeTabs = value;

      this.notePostCategory = value - 1;

      this.page = 1; // 重置页码
      this.getNotes(true); // 传入isReload=true，重置noteList数据
    },
    goBack() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          // let ddd = {
          // 	hideNavBar: '1',
          // 	hideTotalNavBar: '0',
          // 	hideBottomSafeBar: '0',
          // 	url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/community/communityList?categoryId=${group.id}&moduleId=${product.id}`
          // }
          // let d = JSON.stringify(ddd)
          // console.log(d, '都是对的')
          window.AndroidBridge.backEvent();
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.backEvent.postMessage({});
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    release() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            id: this.moduleId,
            categoryId: this.categoryId,
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.communityPublishEvent(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.communityPublishEvent.postMessage({
            id: this.moduleId,
            categoryId: this.categoryId,
          });
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    goDetail(item) {
      // console.log(item.noteId);
      // // uni.navigateTo({
      // //   url: `/pages/community/communityDetail?noteId=${item.noteId}`,
      // // });
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            hideNavBar: "1",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/community/communityDetail?noteId=${item.noteId}&accessToken=${this.accessToken}&userId=${this.userId}`,
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.pushNewWebVC(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.pushNewWebVC.postMessage({
            hideNavBar: "1",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/community/communityDetail?noteId=${item.noteId}&accessToken=${this.accessToken}&userId=${this.userId}`,
          });
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    formatDate(timestamp) {
      if (!timestamp) return "";
      const date = new Date(parseInt(timestamp));
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

.addIcon {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  background-color: #ffffff;
  padding: 10rpx;
  border-radius: 50%;

  image {
    width: 80rpx;
  }
}

.f26 {
  font-size: 26rpx;
  font-weight: 800;
}

.f16 {
  font-size: 16rpx;
  font-weight: 500;
}

.numBoxItem {
  margin-right: 48rpx;
  display: flex;
  align-items: center;
}

.bgImg {
  width: 100%;
  height: 392rpx;
  z-index: 22;
}

.bgImg image {
  width: 100%;
  height: 100%;
}

.leftBackIcon {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  top: 34rpx;
  left: 28rpx;
}

.leftBackIcon image {
  width: 100%;
  height: 100%;
}

.setImg {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  top: 34rpx;
  right: 28rpx;
}

.setImg image {
  width: 100%;
  height: 100%;
}

.userBox {
  display: flex;
  align-items: center;
  position: absolute;
  top: 128rpx;
  left: 28rpx;
}

.leftBox {
}

.headImg {
  position: relative;
}

.headImg image {
  width: 156rpx;
  height: 156rpx;
}

.addImg {
  position: absolute;
  bottom: 0%;
  left: 114rpx;
}

.addImg image {
  width: 40rpx;
  height: 40rpx;
}

.infoBox {
  margin-left: 32rpx;
}

.nameBox text {
  font-weight: 800;
  font-size: 40rpx;
  color: #303030;
  text-align: left;
}

.nameBox image {
  width: 28rpx;
  height: 28rpx;
  margin-left: 16rpx;
}

.IPBox {
  font-weight: 500;
  font-size: 20rpx;
  color: #303030;
}

.numBox {
  color: #303030;
  display: flex;
  align-items: center;
}

.signBox {
  width: 260rpx;
  height: 28rpx;
  position: absolute;
  top: 332rpx;
  left: 28rpx;
}

.signBox image {
  width: 100%;
  height: 100%;
}

.switchTabs {
  margin: 32rpx 28rpx 32rpx;
  display: flex;
  align-items: center;
}

.tabsBox {
  white-space: nowrap;
  background-color: #ffffff;
  font-weight: 400;
  font-size: 28rpx;
  color: #bfbfbf;
  text-align: center;
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 26rpx;
  margin-right: 16rpx;
  border-radius: 48rpx 48rpx 48rpx 48rpx;
}

.actTabsBox {
  white-space: nowrap;
  background-color: #d9f700;
  font-weight: bold;
  font-size: 28rpx;
  color: #303030;
  text-align: center;
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 48rpx 48rpx 48rpx 48rpx;
  margin-right: 16rpx;
  padding: 0 60rpx;
}

.consultBox {
  .consultItem {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 34rpx;
    margin-bottom: 16rpx;

    .leftText {
      padding: 16rpx;
      padding-right: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-weight: bold;
        font-size: 28rpx;
        color: #303030;
      }

      .text {
        font-weight: 500;
        font-size: 20rpx;
        color: #303030;
        margin-top: 32rpx;
        line-height: 32rpx;
        display: flex;
        justify-content: space-between;
      }
    }

    .rightImg {
      width: 296rpx;
      height: 168rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
